<script setup lang="ts">
import {jStorage} from 'jzutil';
import {ref, computed} from 'vue';
import {ElMessage} from 'element-plus';
import {useRouter, useRoute} from 'vue-router';
import phoneSrc from '../../../static/images/phone.png';
const router = useRouter();
const route = useRoute();
const pageEditing = ref(false);
const cancelText = computed(() => {
    const {id} = route.query;
    return id ? '返回' : '取消';
});
const handelCancel = () => {
    router.back();
};
const showSave = computed(() => {
    const {id} = route.query;
    if (!id) {
        return true;
    } else {
        return pageEditing.value;
    }
});
const crtLevel = ref<any>({});
const agesOption = jStorage.getSession('ages') || [];
const stylesOption = jStorage.getSession('styles') || [];
const formData = ref<{
    name: string;
    cImages: string[];
    sImages: {name: string; src: string}[];
    level: string;
    clientName: string;
    clientTel: string;
    coverImage: string;
    ageRange: string;
    style: string;
    tekeTime: string;
    likeNum: number;
    remark: string;
}>({
    name: '',
    cImages: [],
    sImages: [],
    level: '',
    clientName: '',
    coverImage: '',
    clientTel: '',
    ageRange: '',
    tekeTime: '',
    style: '',
    remark: '',
    likeNum: 0
});
const saveDetail = () => {
    const works = jStorage.getLocal('works') || [];
    works.push(formData.value);
    jStorage.setLocal('works', works);
    ElMessage.success({
        message: '保存成功',
        type: 'success',
        duration: 1000
    });
    handelCancel();
};
const imagePreviewList = computed(() => {
    const {sImages} = formData.value;
    return sImages.map((item) => {
        return item.src;
    });
});
const beforeUpload = (file: any) => {
    return true;
};
const onChange = (file: any, fileList: any) => {
    // console.log(file, fileList);
};
const onSuccess = (res: any, file: any, fileList: any) => {
    formData.value.sImages.push({
        src: 'https://child-1258734295.cos.ap-chengdu.myqcloud.com/tempimage/' + file.name,
        name: file.name
    });
};
const onLevelChange = (data: any) => {
    //@ts-ignore
    crtLevel.value = levels.value.finds('name', data).result;
};
const levels = ref<any[]>([]);
(() => {
    const tempLevels = jStorage.getLocal('levels') || [];
    levels.value = tempLevels;
    const {id} = route.query;
    if (id) {
        const works = jStorage.getLocal('works') || [];
        const work = works.finds('name', id);
        const {result} = work;
        const {level} = result;
        formData.value = {...result};
        crtLevel.value = tempLevels.finds('name', level).result;
    }
})();
</script>
<template>
    <el-container class="swiper-detail">
        <el-main class="swiper-detail-body">
            <div class="swiper-detail-form">
                <el-form label-position="left" label-width="100px" :model="formData">
                    <el-form-item label="名称:">
                        <el-input v-model="formData.name" placeholder="请输入名称" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="规格:">
                        <el-select v-model="formData.level" placeholder="请选择规格" @change="onLevelChange">
                            <el-option
                                v-for="(item, index) in levels"
                                :key="index.toString()"
                                :label="item.name"
                                :value="item.name"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="点赞数:">
                        <el-input-number v-model="formData.likeNum" label="描述文字"></el-input-number>
                    </el-form-item>
                    <el-form-item label="图库:">
                        <!-- :show-file-list="false"-->
                        <el-upload
                            class="upload-demo"
                            drag
                            action="https://jsonplaceholder.typicode.com/posts/"
                            accept=".jpg,.png,.jpeg,.webp"
                            multiple
                            list-type="picture"
                            :before-upload="beforeUpload"
                            :on-success="onSuccess"
                            :on-change="onChange"
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="封面图:">
                        <el-select v-model="formData.coverImage" placeholder="请选择图片">
                            <el-option
                                v-for="(item, index) in formData.sImages"
                                :key="index.toString()"
                                :label="item.name"
                                :value="item.src"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="轮播图:">
                        <el-select v-model="formData.cImages" multiple placeholder="请选择图片">
                            <el-option
                                v-for="(item, index) in formData.sImages"
                                :key="index.toString()"
                                :label="item.name"
                                :value="item.src"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户姓名:">
                        <el-input v-model="formData.clientName"></el-input>
                    </el-form-item>
                    <el-form-item label="客户联系方式:">
                        <el-input v-model="formData.clientTel"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄范围:">
                        <el-select v-model="formData.ageRange" placeholder="请选择年龄范围">
                            <el-option
                                v-for="item in agesOption"
                                :key="item.age"
                                :label="item.name"
                                :value="item.age"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="风格:">
                        <el-select v-model="formData.style" placeholder="请选择风格">
                            <el-option v-for="item in stylesOption" :key="item" :label="item" :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="拍摄时间:">
                        <el-date-picker v-model="formData.tekeTime" type="date" placeholder="选择拍摄时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注:">
                        <el-input type="textarea" :rows="4" v-model="formData.remark"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="phone-view">
                <div class="phone-view-body">
                    <div class="phone-view-body-inner">
                        <div class="phone-header">
                            {{ formData.name }}
                        </div>
                        <div class="phone-view-body-inner-copy">
                            <el-carousel height="150px" indicator-position="none">
                                <el-carousel-item v-for="item in formData.cImages" :key="item" heigit="300">
                                    <el-image style="width: 100%; height: 100%" :src="item" fit="cover"></el-image>
                                </el-carousel-item>
                            </el-carousel>
                            <div class="phone-info">
                                <div class="phone-info-left">
                                    <span>{{ formData.name }}</span>
                                    <span>￥ {{ crtLevel.price }}</span>
                                </div>
                                <div class="phone-info-right">
                                    <i class="iconfont icon-xihuan"></i>
                                    <span>{{ formData.likeNum }}</span>
                                </div>
                            </div>
                            <div class="level-view">
                                <div class="level-view-inner">
                                    <div class="level-item">
                                        <span>{{ crtLevel.time }}小时</span>
                                    </div>
                                    <div class="level-item"> 拍摄{{ crtLevel.count }}张 </div>
                                    <div class="level-item">精修{{ crtLevel.hightCount }}张</div>
                                    <div class="level-item">{{ crtLevel.sendLimit }}</div>
                                    <div class="level-item">{{ crtLevel.serveLimit }}</div>
                                </div>
                            </div>
                            <div class="prev-image-view">
                                <el-image
                                    style="width: 100px; height: 100px"
                                    :src="item.src"
                                    v-for="(item, index) in formData.sImages"
                                    :key="index.toString()"
                                ></el-image>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
        <el-footer class="swiper-detail-footer">
            <el-button @click="handelCancel">{{ cancelText }}</el-button>
            <el-button type="primary" v-if="showSave" @click="saveDetail">保存</el-button>
        </el-footer>
    </el-container>
</template>
<style scoped lang="less">
.el-main {
    overflow: hidden;
}
.swiper-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.swiper-detail-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.swiper-detail-body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.swiper-detail-form {
    height: 100%;
    width: calc(100% - 400px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 20px 20px 10px;
}
.phone-view {
    height: 100%;
}
.phone-view-body {
    height: 550px;
    width: 275px;
    background-image: url('../../../static/images/phone.png');
    background-size: 275px 550px;
    position: relative;
    padding: 32px 15px 20px 18px;
    overflow: hidden;
}
.phone-view-body-inner {
    width: 100%;
    height: 100%;
    font-size: 12px;
    overflow: hidden;
}
.phone-view-body-inner-copy {
    width: 100%;
    height: calc(100% - 32px);
    overflow-x: hidden;
    overflow-y: auto;
}
.phone-header {
    width: 100%;
    height: 32px;
    text-align: center;
    line-height: 32px;
}
.el-input {
    width: 200px;
}
.images-view {
    width: 100%;
    padding: 10px;
    border: 1px solid #f1f1f1;
    // box-shadow: 0 0 10px 4px #f1f1f1;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.images-item {
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.phone-info {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.phone-info-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    span:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    span:nth-child(2) {
        font-size: 20px;
        color: #f60;
    }
}
.phone-info-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    i {
        color: rgb(223, 50, 37);
    }
}
.level-view {
    padding: 10px;
}
.level-view-inner {
    width: 100%;
    height: 100px;
    background-color: #eee;
}
.level-item {
    display: inline-block;
    margin: 10px;
}
.prev-image-view {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
.el-image {
    margin: 5px;
}
</style>
